<template>
  <div class="RiskStatistics">
    <ul class="risk-statistics-data">
      <li class="risk-statistics-data__type">
        <div class="risk-statistics-data__type__img">
          <span class="risk-statistics-data__type__img__number"> 2 </span>
        </div>
      </li>
      <li class="risk-statistics-data__type">
        <div class="risk-statistics-data__type__img">
          <span class="risk-statistics-data__type__img__number"> 2 </span>
        </div>
      </li>
      <li class="risk-statistics-data__type">
        <div class="risk-statistics-data__type__img">
          <span class="risk-statistics-data__type__img__number"> 2 </span>
        </div>
      </li>
      <li class="risk-statistics-data__type">
        <div class="risk-statistics-data__type__img">
          <span class="risk-statistics-data__type__img__number"> 2 </span>
        </div>
      </li>
    </ul>

    <ul class="risk-statistics-name">
      <li class="risk-statistics-name__type">
        <span class="risk-statistics-name__type__text">高风险</span>
      </li>
      <li class="risk-statistics-name__type">
        <span class="risk-statistics-name__type__text">较高风险</span>
      </li>
      <li class="risk-statistics-name__type">
        <span class="risk-statistics-name__type__text">一般风险</span>
      </li>
      <li class="risk-statistics-name__type">
        <span class="risk-statistics-name__type__text">低风险</span>
      </li>
    </ul>

    <div class="frame"></div>
  </div>
</template>
<script>
export default {
  name: "RiskStatistics",
  data() {
    return {};
  },
  methods: {},
};
</script>
<style scoped lang='less'>
@img: "/static/img/slope/";

.RiskStatistics {
  width: 100%;
  height: 100%;
}

.risk-statistics-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50%;

  &__type {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;

    &__img {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80%;
      aspect-ratio: 1/1;
      &__number {
        font-size: 1.2rem;
        color: #eee;
      }
    }
  }

  &__type:first-child .risk-statistics-data__type__img {
    background: url("@{img}/colorBall01.webp") center no-repeat;
    background-size: 100%;
  }
  &__type:nth-child(2) .risk-statistics-data__type__img {
    background: url("@{img}/colorBall02.webp") center no-repeat;
    background-size: 100%;
  }
  &__type:nth-child(3) .risk-statistics-data__type__img {
    background: url("@{img}/colorBall03.webp") center no-repeat;
    background-size: 100%;
  }
  &__type:nth-child(4) .risk-statistics-data__type__img {
    background: url("@{img}/colorBall04.webp") center no-repeat;
    background-size: 100%;
  }
}

.risk-statistics-name {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 20%;
  &__type {
    display: flex;
    justify-content: center;
    width: 20%;
    &__text {
      font-size: 1rem;
      color: #eee;
    }
  }
}

.frame {
  width: 100%;
  height: 5%;
  background: linear-gradient(0deg, #155b89ff 50%, #155b8922 100%);
}
</style>
